<template>
  <el-dialog title="关键词管理" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>

    <div class="funbtn">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
    </div>
    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading">
        <el-table-column label="操作" width="210">
          <template slot-scope="scope">
            <el-button type="text" @click="checkItemDetail(scope.row.id)">详情</el-button>
            <el-button type="text" @click="checkItemHandle(scope.row)">选择</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="keywords" label="关键词"></el-table-column>
        <el-table-column prop="matchPattern" label="类型">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.matchPattern == '1'">完全匹配</span>
              <span v-if="scope.row.matchPattern == '2'">包含匹配</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="replyType" label="回复类型">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.replyType == '1'">文字</span>
              <span v-if="scope.row.replyType == '2'">素材</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="回复内容"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        
      </el-table>
    </div>
    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <keyword-detail v-if="detailVisible" ref="detailDialog"></keyword-detail>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { filterParams } from '@/util/tools'
  import { fetchWxMaterialList, delWxMaterialObj } from '@/api/mp/wxmaterial'
  import {fetchWxKeywordsList, delWxKeywordsObj} from '@/api/mp/wxkeywords'
  import { getWxArticleTypeList} from '@/api/mp/wxarticletype'

  import KeywordDetail from './KeywordDetail'


  export default {
    data() {
      return {
        visible: false,
        detailVisible: false,
        dataForm: {},
        dataListLoading: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    components: {
      KeywordDetail
    },
    methods: {
      init(){
        this.visible = true
        this.searchHandle()
      },
      searchHandle(){
        this.pageIndex = 1
        this.getDataList()
      },
      // 清空查询条件
      searchReset(){
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
      },
      // 获取数据列表
      getDataList(){
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        let params2 = filterParams(this.dataForm)
        this.dataListLoading = true
        fetchWxKeywordsList(Object.assign(params1,params2)).then(response => {
          this.dataListLoading = false
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
        }).catch(() => {
          this.dataListLoading = false
        })

      },
      sizeChangeHandle(val){
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle(){
        this.pageIndex = val
        this.getDataList()
      },
      // 查看详情
      checkItemDetail(id){
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.detailDialog.init(id)
        })
      },
      // 选择素材
      checkItemHandle(row){
        this.$emit('refreshData',row)
        this.visible = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .funbtn {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
    margin-bottom: 25px;
    background-color: #fff;
  }
</style>
